<template>
  <view class="videodetail">
    <swiper 
	indicator-dots="true" 
	:vertical="true" 
	:interval="3000" 
	:current="cur" 
	:duration="1000" 
    indicator-color="white" 
	indicator-active-color="black" 
	@change="onSwiperChange"><!-- :current="cur" 当前显示项索引 -->
      <swiper-item v-for="(item, index) in videos" :key="index">
        <video 
		:src="item.video_url" 
		:id="'video-' + index" 
		:controls="true" 
		:loop="true" 
		@click="onVideoClick"></video>
		<view class="videoleft">
			<view class="author">
			  {{ item.source }}
			</view>
			<view class="title">
			  {{ item.title }}
			</view>
		</view>
		<view class="videoright">
			<view class="dz" @click="changeLike(item.id)">
				<image v-if="item.likestatus===1" src="../../img/点赞3.png" alt="" />
				<image v-else src="../../img/点赞4.png" alt="" />
			</view>
			<view class="wz" style="color: aliceblue;">
				{{item.like_count}}
			</view>
			<view class="fx" @click="fx(item.id)">
				<image src="../../img/分享1.png" alt="" />
			</view>
		</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videos: [],
      type: 0,
      videoId: "",  // 当前视频ID
      cur: 0,  // 当前swiper索引
      play: false
    };
  },
  methods: {
    async requestVideoList() {
      const res = await this.$myRequest({
        url: '/video',
        method: 'POST',
        data: {
          type: this.type
        }
      });
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].id == this.videoId) {
          this.cur = i;
        }
      }
      this.videos = res.data;
    },
	// swiper切换回调
    onSwiperChange(e) {
      this.cur = e.detail.current;// 更新当前索引
	  console.log(e)
      this.pauseAllVideos(); // 暂停所有视频
      this.playVideoByIdFromStart('video-' + this.cur); // 播放当前视频
    },
	// 视频点击事件处理
    onVideoClick(e) {
      if (this.play === false) {
        this.onVideoPlay(e.target.id);
      } else {
        this.onVideoPause(e.target.id);
      }
    },
	// 播放指定视频
    onVideoPlay(videoCptId) {
      this.pauseOtherVideos(videoCptId);
      this.playVideoById(videoCptId);
	  this.play = true
    },
	// 暂停指定视频
    onVideoPause(videoCpId) {
      this.pauseVideoById(videoCpId);
      this.play = false
    },
	// 暂停所有视频
    pauseAllVideos() {
      this.videos.forEach((_, index) => {
        this.pauseVideoById('video-' + index);
      });
    },
	// 暂停其他视频（除当前外）
    pauseOtherVideos(currentVideoCptId) {
      this.videos.forEach((_, index) => {
        const videoCptId = 'video-' + index;
        if (videoCptId !== currentVideoCptId) {
          this.pauseVideoById(videoCptId);
        }
      });
    },
	// 播放指定ID的视频
    playVideoById(videoCptId) {
      const videoContext = uni.createVideoContext(videoCptId);
      videoContext.play();
    },
	// 从开头播放指定视频
    playVideoByIdFromStart(videoCptId) {
      const videoContext = uni.createVideoContext(videoCptId);
      videoContext.seek(0);
      videoContext.play();
    },
	// 暂停指定ID的视频
    pauseVideoById(videoOptId) {
      const videoContext = uni.createVideoContext(videoOptId);
      videoContext.pause();
    },
	//点赞功能
	changeLike(id) {
		  if (this.videos[this.cur].likestatus === 0) {
			  this.videos[this.cur].likestatus = 1
			  this.videos[this.cur].like_count --
		  } else {
			  this.videos[this.cur].likestatus = 0
			  this.videos[this.cur].like_count ++
		  }
		  this.updateVideo(id)
	},
  
    //点赞api 
    async updateVideo(id){
    	const res = await this.$myRequest({
  		    url: '/updatevideo',
  		    method: 'POST',
  		    data: {
  		    	id: id,
  		    	likestatus: this.videos[this.cur].likestatus,
  		    	like_count: this.videos[this.cur].like_count
  		    }
  	    })
  	}
},
  // 页面加载生命周期
  onLoad(options) {
    this.videoId = options.id;  // 获取路由参数
    this.type = options.type;
    this.requestVideoList();  // 请求数据
  }
}
</script>

<style lang="scss">
page {
  width: 100%;
  height: 100%;
}

.videodetail {
  width: 100%;
  height: 100%;
  background-color: $uni-bg-color-grey;
}

swiper {
  width: 100%;
  height: 100%;
}

swiper-item {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
}

.videoleft {
  z-index: 20;
  position: absolute;
  bottom: 20px;
  left: 10px;
  height: 150px;
  margin-left: 10px;
  color: #FFFFFF;
  width: 150px;
}

.author {
  height: 35px;
  line-height: 35px;
  font-size: 15px;
}

.title {
  line-height: 22px;
  font-size: 12px;
  width: 100%;
  word-wrap: break-word;
}
.dz, .fx {
  width: 60rpx;    // 明确容器尺寸
  height: 60rpx;
  padding-top: 10px;
  justify-content: center;
   image {
      width: 100%;    // 保留边距
      height: 100%;
    }
}
.videoright{
	z-index: 20;
	position: absolute;
	top: 40%;
	right: -80px;
	height: 150px;
	width: 150px;
}
</style>